<style lang="scss" scoped>
.van-tabbar-item__text {
  font-size: 1.3rem !important;
}
.tab_round {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  top: -50%;
  transform: translate(-50%, 15%);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  z-index: 999;
  border: 1px solid white;
  box-shadow: 0 1px 5px #999;
  span {
    color: white;
    font-size: 50px;
    // margin-top: -10px;
    font-weight: 200;
  }
}
.tab_down {
  margin-top: 5px;
}
</style>
<template>
  <van-tabbar
    v-model="tabbarActive"
    :active-color="getMasterColor"
    :inactive-color="inactiveColor"
    title-class="fs-14"
    @change="tabChange"
  >
    <van-tabbar-item icon="records">活动案例</van-tabbar-item>
    <van-tabbar-item icon="qr">活动管理</van-tabbar-item>
    <van-tabbar-item>
      <template>
        <div class="tab_round" :style="{ backgroundColor: getMasterColor }">
          <span>+</span>
        </div>
        <!-- <span class="tab_down">裂变系统</span> -->
      </template>
      <!-- <span>{{item.text}}</span>
      <template #icon="props">
        <img :src="props.active ? item.activeIcon : item.inactiveIcon" />
      </template> -->
    </van-tabbar-item>
    <van-tabbar-item icon="friends-o">活动粉丝</van-tabbar-item>
    <van-tabbar-item icon="shop-o">商家中心</van-tabbar-item>
    <!-- <van-tabbar-item
      v-for="(item, index) in tabbar"
      :key="index"
      :icon="active === index ? item.activeIcon : item.inactiveIcon"
      >{{ item.text }}</van-tabbar-item
    > -->
    <!-- <van-tabbar-item v-for="item in tabbar" :key="item.id">
      <span>{{item.text}}</span>
      <template #icon="props">
        <img :src="props.active ? item.activeIcon : item.inactiveIcon" />
      </template>
    </van-tabbar-item> -->
  </van-tabbar>
</template>
<script>
import { Tabbar, TabbarItem } from "vant";
import { mapGetters, mapState } from "vuex";
export default {
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  data() {
    return {
      active: 0,
      activeColor: "#FF0000",
      inactiveColor: "#565656",
      tabbar: [],
    };
  },
  computed: {
    ...mapGetters(["getMasterColor"]),
    ...mapState(["tabbarActive"]),
    tabbarActive: {
      get() {
        return this.$store.state.tabbarActive;
      },
      set(v) {
        this.active = v;
      },
    },
  },
  mounted() {
    const _this = this;
    // console.log(_this.route.query.key, '------_this.route.query.key-------');
    const tabbar = _this.$store.getters.getTabbar;
    if (tabbar.length > 0) {
      _this.tabbar = tabbar;
      _this.initActive();
    } else {
      //调用接口获取tabbar
      _this.getTabbar();
    }

    // this.ConfigItem()
  },
  methods: {
    getTabbar() {
      const _this = this;
      let params = {
        pageNo: 1,
        pageSize: 10,
      };
      _this.$request.getTabbar(params).then((res) => {
        _this.tabbar = JSON.parse(res.data.value.list);
        _this.$store.commit("setTabbar", _this.tabbar);
        localStorage.setItem("tabbar", res.data.value.list);
        _this.initActive();
      });
    },
    initActive() {
      const _this = this;
      //初始化active
      let params = window.location.hash;
      let hash = params.substr(2);
      console.log(hash, params, _this.active, "params");
      switch (hash) {
        case "case":
          _this.active = 0;
          _this.$store.commit("setTabbarActive", _this.active);
          document.title = _this.tabbar[_this.active].text;
          break;
        case "manage":
          _this.active = 1;
          _this.$store.commit("setTabbarActive", _this.active);
          document.title = _this.tabbar[_this.active].text;
          break;
        case "system":
          _this.active = 2;
          _this.$store.commit("setTabbarActive", _this.active);
          document.title = _this.tabbar[_this.active].text;
          break;
        case "fans":
          _this.active = 3;
          _this.$store.commit("setTabbarActive", _this.active);
          document.title = _this.tabbar[_this.active - 1].text;
          break;
        case "my":
          _this.active = 4;
          _this.$store.commit("setTabbarActive", _this.active);
          document.title = _this.tabbar[_this.active - 1].text;
          break;
        default:
          _this.active = 0;
          _this.$store.commit("setTabbarActive", _this.active);
      }
    },
    tabChange(key) {
      console.log(key, "key");
      const _this = this;
      switch (key) {
        case 0:
          _this.$router.replace("/case");
          _this.$store.commit("setTabbarActive", key);
          document.title = _this.tabbar[key].text;
          break;
        case 1:
          _this.$router.replace("/manage");
          _this.$store.commit("setTabbarActive", key);
          document.title = _this.tabbar[key].text;
          break;
        case 2:
          _this.$router.replace("/system");
          _this.$store.commit("setTabbarActive", key);
          document.title = "裂变系统";
          break;
        case 3:
          _this.$router.replace("/fans");
          _this.$store.commit("setTabbarActive", key);
          document.title = _this.tabbar[key - 1].text;
          break;
        case 4:
          _this.$router.replace("/my");
          _this.$store.commit("setTabbarActive", key);
          document.title = _this.tabbar[key - 1].text;
          break;
        default:
          break;
      }
    },
  },
};
</script>